.guideDownload {
  @apply flex h-auto;
  width: calc(100% - 1rem);
  min-height: 6.25rem;

  .guide {
    @apply w-2/4 rounded-lg relative flex items-center justify-end;

    .guide-img {
      @apply top-0 absolute left-0 w-40;
      height: 6.25rem;
    }

    .guide-text {
      @apply absolute left-40 leading-8 text-white text-2xl;
      top: 2.125rem;
    }

    .guide-btn {
      @apply flex bg-theme items-center justify-center text-base text-white mr-7;
      width: 9.25rem;
      height: 2.75rem;
      border-radius: 2.75rem;

      & > img {
        @apply w-6 h-6;
        margin-right: 0.375rem;
      }
    }
  }

  .guideTv {
    background-image: linear-gradient(to right, #305d78, #050813);

    .starTvStar {
      @applu absolute w-3 h-3;
      left: 9.25rem;
      top: 4.875rem;
    }

    .guide-polygon {
      @apply absolute;
      width: 3.75rem;
      height: 4.375rem;
    }
  }

  .guidePhone {
    @apply mr-4;

    .guide-triangle {
      @apply absolute top-0 z-3 w-auto;
      width: 4.875rem;
      height: 6.25rem;
    }

    background-image: linear-gradient(to right, #623578, #0e031a);
  }
}

@media screen and (min-width: 48rem) and (max-width: 85rem) {
  .guideDownload {
    height: 11rem;

    .guide {
      @apply justify-start items-end;

      .guide-btn {
        @apply ml-8 mb-4;
      }

      .guide-polygon-top {
        top: 0 !important;
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .guideDownloadPhone {
    @apply w-screen flex px-4 my-5;

    .guide {
      @apply flex-1 block;

      & > img {
        @apply w-full;
      }

      &:first-child {
        @apply mr-2;
      }
    }
  }
}
